<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>

<head>
    <meta charset='utf-8'>
    <!-- <script src='./public/echarts/test/lib/esl.js'></script> -->
    <script src='./public/echarts/test/lib/config.js'></script>
    <script src='./public/echarts/test/lib/jquery.min.js'></script>
    <script src='./public/echarts/dist/echarts.min.js'></script>

    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
    <style>
        html,
        body,
        #main {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
    <div id='main'></div>
    <script>
        // 秋雁南飞：
        // 此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果
        // 默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
        // 当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。
        // http://echarts.baidu.com/option.html#series-map.geoIndex
        // 并且加了pin气泡图标以示数值大小
        // // 全局变量区:参考江西绿色金融（谢谢：本来想用闭包实现接口数据调用，没时间了）

        // 本图作者：参考秋雁南飞的《投票统计》一图，网址：http://gallery.echartsjs.com/editor.html?c=xrJU-aE-LG
        var name_title = "中国人民大学2017年各省市计划录取人数"
        var subname = '数据爬取自千栀网\n，\n上海、浙江无文理科录取人数'
        var nameColor = " rgb(55, 75, 113)"
        var name_fontFamily = '等线'
        var subname_fontSize = 15
        var name_fontSize = 18
        var mapName = 'taiwan'
        var data = [
            { name: "北京", value: 177 },
            { name: "天津", value: 42 },
            { name: "河北", value: 102 },
            { name: "山西", value: 81 },
            { name: "内蒙古", value: 47 },
            { name: "辽宁", value: 67 },
            { name: "吉林", value: 82 },
            { name: "黑龙江", value: 66 },
            { name: "上海", value: 24 },
            { name: "江苏", value: 92 },
            { name: "浙江", value: 114 },
            { name: "安徽", value: 109 },
            { name: "福建", value: 116 },
            { name: "江西", value: 91 },
            { name: "山东", value: 119 },
            { name: "河南", value: 137 },
            { name: "湖北", value: 116 },
            { name: "湖南", value: 114 },
            { name: "重庆", value: 91 },
            { name: "四川", value: 125 },
            { name: "贵州", value: 62 },
            { name: "云南", value: 83 },
            { name: "西藏", value: 9 },
            { name: "陕西", value: 80 },
            { name: "甘肃", value: 56 },
            { name: "青海", value: 10 },
            { name: "宁夏", value: 18 },
            { name: "新疆", value: 67 },
            { name: "广东", value: 123 },
            { name: "广西", value: 59 },
            { name: "海南", value: 14 },
        ];

        var geoCoordMap = {};
        var toolTipData = [
            { name: "北京", value: [{ name: "文科", value: 95 }, { name: "理科", value: 82 }] },
            { name: "天津", value: [{ name: "文科", value: 22 }, { name: "理科", value: 20 }] },
            { name: "河北", value: [{ name: "文科", value: 60 }, { name: "理科", value: 42 }] },
            { name: "山西", value: [{ name: "文科", value: 40 }, { name: "理科", value: 41 }] },
            { name: "内蒙古", value: [{ name: "文科", value: 23 }, { name: "理科", value: 24 }] },
            { name: "辽宁", value: [{ name: "文科", value: 39 }, { name: "理科", value: 28 }] },
            { name: "吉林", value: [{ name: "文科", value: 41 }, { name: "理科", value: 41 }] },
            { name: "黑龙江", value: [{ name: "文科", value: 35 }, { name: "理科", value: 31 }] },
            { name: "上海", value: [{ name: "文科", value: 12 }, { name: "理科", value: 12 }] },
            { name: "江苏", value: [{ name: "文科", value: 47 }, { name: "理科", value: 45 }] },
            { name: "浙江", value: [{ name: "文科", value: 57 }, { name: "理科", value: 57 }] },
            { name: "安徽", value: [{ name: "文科", value: 57 }, { name: "理科", value: 52 }] },
            { name: "福建", value: [{ name: "文科", value: 59 }, { name: "理科", value: 57 }] },
            { name: "江西", value: [{ name: "文科", value: 49 }, { name: "理科", value: 42 }] },
            { name: "山东", value: [{ name: "文科", value: 67 }, { name: "理科", value: 52 }] },
            { name: "河南", value: [{ name: "文科", value: 69 }, { name: "理科", value: 68 }] },
            { name: "湖北", value: [{ name: "文科", value: 60 }, { name: "理科", value: 56 }] },
            { name: "湖南", value: [{ name: "文科", value: 62 }, { name: "理科", value: 52 }] },
            { name: "重庆", value: [{ name: "文科", value: 47 }, { name: "理科", value: 44 }] },
            { name: "四川", value: [{ name: "文科", value: 65 }, { name: "理科", value: 60 }] },
            { name: "贵州", value: [{ name: "文科", value: 32 }, { name: "理科", value: 30 }] },
            { name: "云南", value: [{ name: "文科", value: 42 }, { name: "理科", value: 41 }] },
            { name: "西藏", value: [{ name: "文科", value: 5 }, { name: "理科", value: 4 }] },
            { name: "陕西", value: [{ name: "文科", value: 38 }, { name: "理科", value: 42 }] },
            { name: "甘肃", value: [{ name: "文科", value: 28 }, { name: "理科", value: 28 }] },
            { name: "青海", value: [{ name: "文科", value: 5 }, { name: "理科", value: 5 }] },
            { name: "宁夏", value: [{ name: "文科", value: 10 }, { name: "理科", value: 8 }] },
            { name: "新疆", value: [{ name: "文科", value: 36 }, { name: "理科", value: 31 }] },
            { name: "广东", value: [{ name: "文科", value: 63 }, { name: "理科", value: 60 }] },
            { name: "广西", value: [{ name: "文科", value: 29 }, { name: "理科", value: 30 }] },
            { name: "海南", value: [{ name: "文科", value: 8 }, { name: "理科", value: 6 }] },
        ];
        $.get('./public/echarts/map/json/province/taiwan.json', function (tawianJson) {
            echarts.registerMap('taiwan', tawianJson);
            /*获取地图数据*/
            var myChart = echarts.init(document.getElementById('main'));

            myChart.showLoading();
            var mapFeatures = echarts.getMap(mapName).geoJson.features;
            myChart.hideLoading();
            mapFeatures.forEach(function (v) {
                // 地区名称
                var name = v.properties.name;
                // 地区经纬度
                geoCoordMap[name] = v.properties.cp;

            });

            // console.log("============geoCoordMap===================")
            // console.log(geoCoordMap)
            // console.log("================data======================")
            console.log(data)
            console.log(toolTipData)
            var max = 480,
                min = 9; // todo 
            var maxSize4Pin = 100,
                minSize4Pin = 20;

            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value),
                        });
                    }
                }
                return res;
            };
            option = {
                title: {
                    text: name_title,
                    subtext: subname,
                    x: 'center',
                    textStyle: {
                        color: nameColor,
                        fontFamily: name_fontFamily,
                        fontSize: name_fontSize
                    },
                    subtextStyle: {
                        fontSize: subname_fontSize,
                        fontFamily: name_fontFamily
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        if (typeof (params.value)[2] == "undefined") {
                            var toolTiphtml = ''
                            for (var i = 0; i < toolTipData.length; i++) {
                                if (params.name == toolTipData[i].name) {
                                    toolTiphtml += toolTipData[i].name + ':<br>'
                                    for (var j = 0; j < toolTipData[i].value.length; j++) {
                                        toolTiphtml += toolTipData[i].value[j].name + ':' + toolTipData[i].value[j].value + "<br>"
                                    }
                                }
                            }
                            console.log(toolTiphtml)
                            // console.log(convertData(data))
                            return toolTiphtml;
                        } else {
                            var toolTiphtml = ''
                            for (var i = 0; i < toolTipData.length; i++) {
                                if (params.name == toolTipData[i].name) {
                                    toolTiphtml += toolTipData[i].name + ':<br>'
                                    for (var j = 0; j < toolTipData[i].value.length; j++) {
                                        toolTiphtml += toolTipData[i].value[j].name + ':' + toolTipData[i].value[j].value + "<br>"
                                    }
                                }
                            }
                            console.log(toolTiphtml)
                            // console.log(convertData(data))
                            return toolTiphtml;
                        }
                    }
                },
                // legend: {
                //     orient: 'vertical',
                //     y: 'bottom',
                //     x: 'right',
                //     data: ['credit_pm2.5'],
                //     textStyle: {
                //         color: '#fff'
                //     }
                // },
                visualMap: {
                    show: true,
                    min: 0,
                    max: 200,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'], // 文本，默认为数值文本
                    calculable: true,
                    seriesIndex: [1],
                    inRange: {
                        // color: ['#3B5077', '#031525'] // 蓝黑
                        // color: ['#ffc0cb', '#800080'] // 红紫
                        // color: ['#3C3B3F', '#605C3C'] // 黑绿
                        // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                        // color: ['#23074d', '#cc5333'] // 紫红
                        color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#1488CC', '#2B32B2'] // 浅蓝
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#00467F', '#A5CC82'] // 蓝绿

                    }
                },
                /*工具按钮组*/
                // toolbox: {
                //     show: true,
                //     orient: 'vertical',
                //     left: 'right',
                //     top: 'center',
                //     feature: {
                //         dataView: {
                //             readOnly: false
                //         },
                //         restore: {},
                //         saveAsImage: {}
                //     }
                // },
                // geo: {
                //     show: true,
                //     map: mapName,
                //     label: {
                //         normal: {
                //             show: false
                //         },
                //         emphasis: {
                //             show: false,
                //         }
                //     },
                //     roam: true,
                //     itemStyle: {
                //         normal: {
                //             areaColor: '#031525',
                //             borderColor: '#3B5077',
                //         },
                //         emphasis: {
                //             areaColor: '#2B91B7',
                //         }
                //     }
                // },
                series: [
                //     {
                //     name: '散点',
                //     type: 'scatter',
                //     coordinateSystem: 'geo',
                //     data: convertData(data),
                //     symbolSize: function (val) {
                //         return val[2] / 10;
                //     },
                //     label: {
                //         normal: {
                //             formatter: '{b}',
                //             position: 'right',
                //             show: true
                //         },
                //         emphasis: {
                //             show: true
                //         }
                //     },
                //     itemStyle: {
                //         normal: {
                //             color: '#05C3F9'
                //         }
                //     }
                // },
                {
                    type: 'map',
                    map: mapName,
                    geoIndex: 0,
                    aspectScale: 0.75, //长宽比
                    showLegendSymbol: false, // 存在legend时显示
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#031525',
                            borderColor: '#3B5077',
                        },
                        emphasis: {
                            areaColor: '#2B91B7'
                        }
                    },
                    animation: false,
                    data: data
                },
                // {
                //     name: '点',
                //     type: 'scatter',
                //     coordinateSystem: 'geo',
                //     symbol: 'pin', //气泡
                //     symbolSize: function (val) {
                //         var a = (maxSize4Pin - minSize4Pin) / (max - min);
                //         var b = minSize4Pin - a * min;
                //         b = maxSize4Pin - a * max;
                //         return a * val[2] + b;
                //     },
                //     label: {
                //         normal: {
                //             show: true,
                //             textStyle: {
                //                 color: '#fff',
                //                 fontSize: 9,
                //             }
                //         }
                //     },
                //     itemStyle: {
                //         normal: {
                //             color: '#F62157', //标志颜色
                //         }
                //     },
                //     zlevel: 6,
                //     data: convertData(data),
                // },
                // {
                //     name: 'Top 5',
                //     type: 'effectScatter',
                //     coordinateSystem: 'geo',
                //     data: convertData(data.sort(function (a, b) {
                //         return b.value - a.value;
                //     }).slice(0, 5)),
                //     symbolSize: function (val) {
                //         return val[2] / 10;
                //     },
                //     showEffectOn: 'render',
                //     rippleEffect: {
                //         brushType: 'stroke'
                //     },
                //     hoverAnimation: true,
                //     label: {
                //         normal: {
                //             formatter: '{b}',
                //             position: 'right',
                //             show: true
                //         }
                //     },
                //     itemStyle: {
                //         normal: {
                //             color: 'yellow',
                //             shadowBlur: 10,
                //             shadowColor: 'yellow'
                //         }
                //     },
                //     zlevel: 1
                // },

                ]
            };
            myChart.setOption(option);
        });
    </script>
</body>

</html>